<template>
  <el-radio-group class="offset-margin" v-model="selectRadioValue" @change="selectRadio">
    <div v-for="(item, i) in treeData" :key="i" style="margin-right: 10px">
      <el-radio class="layer-radio" border :label="item.id" @change="pcbCraftsChange(item)">
        {{ item.serviceName }}
      </el-radio>

      <div v-if="item.children && item.children.length">
        <recursive-service
          :tree-data="item.children"
          v-if="selectRadioValue === item.id"
          :id="item.id"
          :isTopData="false"
          @change="handleChildCraftData"
        />
      </div>
    </div>
  </el-radio-group>
</template>

<script setup>
import { ref, inject } from 'vue';

defineOptions({
  name: 'RecursiveService',
});

const selectRadioValue = ref('');
const childData = inject('childData');

// 处理子工艺数据
const handleChildCraftData = (val) => {
  emit('change', val);
};

const props = defineProps({
  treeData: {
    type: Array,
  },
  id: {
    type: String,
  },
  // 是否是最顶层数据
  isTopData: {
    type: Boolean,
  },
});

const emit = defineEmits(['change', 'exportBroadId']);

const selectRadio = (value) => {
  if (props.isTopData) {
    // 这是二级工艺
    childData[props.id] = value;
  } else {
    // 三级以下工艺数据
    childData[props.id] = {
      [props.id]: value,
    };
  }

  emit('change', childData);
};

// 选中改变状态
const pcbCraftsChange = (item) => {
  // 选中板层信息
  if (item.mainCategory === 1) {
    emit('exportBroadId', {
      id: item.id,
    });
  }

  // // 选中不同板层 展示不同数据
  // if (item.mainCategory == 1) {
  //   // 子工艺名称
  //   data.pcbNumberLayers = layer.craftsDetailName;
  //   // 子工艺id
  //   selectedValuesObj.value.craftDetailId = layer.id;
  //   // 工艺的key
  //   selectedValuesObj.value.craftsCategoryKey = item.craftsKey;
  //   /**
  //    * 获取层过滤信息，包括置灰按钮
  //    */
  //   getLayerFilterInfo();
  //   /**
  //    * 选中板层初始化所有选中的工艺
  //    */
  //   initAllTey();
  // }
  // item.relationId = [item.id];

  // const obj = {
  //   billingName: item.craftsName, // 工艺名称
  //   craftsKey: layer.craftsCategoryKey, // 子工艺key
  //   detailId: layer.id, // 子工艺ID
  //   craftsDetailKey: layer.craftsDetailKey, // 子工艺key
  // };

  // // 选择后的工艺值;
  // selectedValues.value[index] = obj;

  // 板子数量有，板子宽度有，板子长度有，
  // if (data.length && data.width && ruleForm.amount) {
  //   // 获取右侧PAB报价数据
  //   getPcbQuote();
  // } else {
  //   // 否则初始化所有数据
  //   initAllTey();
  //   ElMessage.warning('请先填写板子尺寸、板子数量');
  // }
};
</script>

<style lang="scss" scoped>
.pricing-pcb {
  display: flex;
  padding-top: 12px;
  padding-bottom: 72px;

  &.container {
    padding: 20px 240px;
    margin: 0 auto;
  }
  &-main {
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    width: 1040px;
    margin-right: 12px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 8px;

    .offset-margin {
      // 抵消radio-item底边边距
      margin-bottom: -14px;
    }
  }
}

::v-deep .el-radio-group {
  max-width: 612px;
}

.offset-margin {
  display: flex;
  align-items: self-start;
}
</style>
